<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<!--<jk-add-button :permission-prefix="prefix" class="margin-5-0 item-gap" @click="onAddBtn"></jk-add-button>-->
				</div>
				<div class="flex-start-center-wrap">
					<jk-date-picker v-model="searchParams.belongDate" class="search-bar-item-size2 item-gap" type="date" placeholder="日期" @change="onDateChange" />
					<jk-select v-model="searchParams.shiftId" :option-list="scheduleShiftList" value-key-name="shiftId" label-key-name="shiftName" clearable placeholder="班次" class="search-bar-item-size2 item-gap" size="small"></jk-select>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<div ref="box2">
				<el-row :gutter="14">
					<el-col :span="18" class="margin-bottom-20">
						<el-tag type="primary" effect="plain" class="margin-bottom-4">
							<span class="el-icon-close-notification item-gap"></span>
							<span>未打卡({{ noCardPunchedEmpList.length }}人)</span>
						</el-tag>
						<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="noCardPunchedEmpList">
							<vxe-column title="岗位" align="left" field="postName" :width="100" />
							<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
							<vxe-table-column field="empName" title="人员" align="left" :width="100"></vxe-table-column>
							<vxe-column title="上班打卡时间" align="left" field="clockIn" :width="150" />
							<vxe-column title="下班打卡时间" align="left" field="clockOut" :width="150" />
							<!--<vxe-column title="未打卡原因" align="left" field="beLateName" :width="100"></vxe-column>-->
							<vxe-column title="备注" align="left" field="remark" :width="180"></vxe-column>
						</jk-table>
					</el-col>
					<el-col :span="18" class="margin-bottom-20">
						<el-tag type="primary" effect="plain" class="margin-bottom-4">
							<span class="el-icon-bell item-gap"></span>
							<span>迟到早退({{ beLateEmpList.length }}人)</span>
						</el-tag>
						<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="beLateEmpList">
							<vxe-column title="岗位" align="left" field="postName" :width="100" />
							<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
							<vxe-table-column field="empName" title="人员" align="left" :width="100"></vxe-table-column>
							<vxe-column title="上班打卡时间" align="left" field="clockIn" :width="150" />
							<vxe-column title="下班打卡时间" align="left" field="clockOut" :width="150" />
							<!--<vxe-column title="迟到原因" align="left" field="beLateName" :width="100"></vxe-column>-->
							<!--<vxe-column title="早退原因" align="left" field="leaveEarlyName" :width="100"></vxe-column>-->
							<vxe-column title="备注" align="left" field="remark" :width="180"></vxe-column>
						</jk-table>
					</el-col>
					<el-col :span="18" class="margin-bottom-20">
						<el-tag type="primary" effect="plain" class="margin-bottom-4">
							<span class="el-icon-alarm-clock item-gap"></span>
							<span>请假({{ leaveEmpList.length }}人)</span>
						</el-tag>
						<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="leaveEmpList">
							<vxe-column title="岗位" align="left" field="postName" :width="100" />
							<vxe-table-column type="seq" title="序号" align="center" :width="60"></vxe-table-column>
							<vxe-table-column field="empName" title="人员" align="left" :width="100"></vxe-table-column>
							<vxe-column title="请假原因" align="left" field="leaveTypeName" :width="100"></vxe-column>
							<vxe-column title="请假时间" align="left" field="endDateTime" :width="290">
								<template slot-scope="scope">
									<span>{{ scope.row.startDateTime }}~{{ scope.row.endDateTime }}</span>
								</template>
							</vxe-column>
							<vxe-column title="请假天数" align="right" field="leaveDay" :width="80" />
							<vxe-column title="备注" align="left" field="remark" :width="180"></vxe-column>
						</jk-table>
					</el-col>
				</el-row>
			</div>
		</jk-card>
	</div>
</template>

<script>
    import { auditStateList } from '@/utils/jk/status-option-list';
    import saveDialog from './save-dialog';
    import detailDialog from './detail-dialog';
    import calHeight from '/src/mixins/cal-table-height';
    import { formatDate, pageConfig, tipsBar } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import handlerCache from '../../../mixins/handler-cache';
    import { workforcemanagementScheduleList } from '../../../api/schedule/scheduling';
    import {
        workforceManagementWorkshopShiftCheckingInDayData,
        workforceManagementWorkshopShiftCheckingInPage
    } from '../../../api/personnel/workshopScheduleShiftAttendanceStatistic';

    export default {
        name: 'DailyScheduleShiftAttendanceStatistic',
        components: {
            saveDialog,
            detailDialog
        },
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                prefix: 'production:machineChangeRecord',
                apiItem: {
                    'page': workforceManagementWorkshopShiftCheckingInDayData
                },
                workshopList: [],
                processList: [],
                auditStateList: auditStateList,
                detailDialogState: false,
                dataId: null,
                saveDialogState: false,
                tableLoading: true,
                exportLoading: false,
                tableData: [],
                ruleForm: {},
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    belongDate: null,
                    shiftId: null,
                    auditState: null
                },
                scheduleShiftList: [],
                beLateEmpList: [],
                noCardPunchedEmpList: [],
                leaveEmpList: []
            };
        },
        methods: {
            mergeColMethod({ row, _rowIndex, column, visibleData }) {
                const fields = ['postName'];
                const cellValue = row[column.property];
                if (cellValue && fields.includes(column.property)) {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (prevRow && prevRow[column.property] === cellValue) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow[column.property] === cellValue) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                }
            },
            onDateChange() {
                this.$set(this.searchParams, 'shiftId', null);
                this.scheduleShiftList = [];
                this.beLateEmpList = [];
                this.noCardPunchedEmpList = [];
                this.leaveEmpList = [];
                this.getAttendanceShiftListRequest();
            },
            getAttendanceShiftListRequest() {
                if (this.searchParams.belongDate) {
                    return workforceManagementWorkshopShiftCheckingInPage({
                        belongDate: [this.searchParams.belongDate, this.searchParams.belongDate]
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            const shiftConfig = {};
                            if (resData && resData.length) {
                                resData.forEach(x => {
                                    if (!shiftConfig[x.shiftId]) {
                                        shiftConfig[x.shiftId] = {
                                            shiftId: x.shiftId,
                                            shiftName: x.shiftName
                                        };
                                    }
                                });
                                this.scheduleShiftList = Object.values(shiftConfig);
                            }
                        }
                    });
                }
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                if (this.searchParams.belongDate && this.searchParams.shiftId) {
                    this.apiItem.page({
                        belongDate: this.searchParams.belongDate,
                        shiftId: this.searchParams.shiftId
                    }).then(res => {
                        this.tableLoading = false;
                        if (res.data.status === 200) {
                            const resData = res.data.res ? JSON.parse(JSON.stringify(res.data.res)) : {};
                            this.beLateEmpList = [];
                            resData.beLateEmpList = resData.beLateEmpList || [];
                            resData.beLateEmpList.forEach(x => {
                                x.empList.forEach(k => {
                                    this.beLateEmpList.push({
                                        ...k,
                                        postId: x.postId,
                                        postName: x.postName
                                    });
                                });
                            });
                            this.noCardPunchedEmpList = [];
                            resData.noCardPunchedEmpList = resData.noCardPunchedEmpList || [];
                            resData.noCardPunchedEmpList.forEach(x => {
                                x.empList.forEach(k => {
                                    this.noCardPunchedEmpList.push({
                                        ...k,
                                        postId: x.postId,
                                        postName: x.postName
                                    });
                                });
                            });
                            this.leaveEmpList = [];
                            resData.leaveEmpList = resData.leaveEmpList || [];
                            resData.leaveEmpList.forEach(x => {
                                x.empList.forEach(k => {
                                    this.leaveEmpList.push({
                                        ...k,
                                        postId: x.postId,
                                        postName: x.postName
                                    });
                                });
                            });
                            this.ruleForm = resData;
                        }
                    });
                } else {
                    tipsBar(this, 'warning', 'custom', '日期和班次不能为空!');
                }
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.$toOtherRouter({ name: 'addDailyScheduleShiftAttendanceStatistic' });
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.$toOtherRouter({
                    name: 'editDailyScheduleShiftAttendanceStatistic',
                    query: {
                        id: row.id
                    }
                });
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            async getDependentData() {
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                await this.getMenuColumnListRequest();
                await this.getAttendanceShiftListRequest();
                await this.getListRequest();
            }
        },
        mounted() {
            this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
            this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
            this.getDependentData();
        }
    };
</script>
